<template>
	<view class="signInDetailPage">
		<view class="consultantBox">
			<view class="consultantBox_title">
				<view class="consultantBox_title_border" />
				<view class="consultantBox_title_text">
					<u-text color="#333" size="34rpx" bold text="会议详情" />
				</view>
			</view>
		</view>
		<view class="detail">
			<!-- 骨架 loading状态（网速慢或者服务器响应慢的时候用来加载的loading状态） -->
			<u-skeleton :loading="hotState.loading" avatarSize="120rpx" rows="6" :rowsWidth="[
                    '120rpx',
                    '400rpx',
                    '120rpx',
                    '400rpx',
                    '120rpx',
                    '400rpx',
                ]" :title="false">
				<view class="detail_title">
					<u-text text="会议主题" color="#666" size="26rpx" />
					<u-gap height="10rpx" bgColor="#FFF" />
					<u-text :text="hotState.data.theme || '-'" color="#333" size="40rpx" bold />
				</view>
				<view class="detail_time">
					<u-text text="时间" color="#666" size="26rpx" />
					<u-gap height="10rpx" bgColor="#FFF" />
					<u-text color="#333" size="28rpx" :text="`${
                            (hotState &&
                                hotState.data &&
                                $u.timeFormat(
                                    hotState.data.startTime,
                                    'yyyy/mm/dd hh:MM'
                                )) ||
                            '-'
                        } - ${
                            (hotState &&
                                hotState.data &&
                                $u.timeFormat(
                                    hotState.data.endTime,
                                    'yyyy/mm/dd hh:MM'
                                )) ||
                            '-'
                        }`" />
				</view>
				<view class="detail_address">
					<u-text text="地点" color="#666" size="26rpx" />
					<u-gap height="10rpx" bgColor="#FFF" />
					<u-text :text="hotState.data.address || '-'" color="#333" size="28rpx" bold />
				</view>
			</u-skeleton>
		</view>
		<view class="signButton">
			<u-skeleton :loading="hotState.loading" avatarSize="120rpx" rows="1" :rowsWidth="['700rpx']"
				:rowsHeight="['80rpx']" :title="false">
				<u-text align="center" text="已签到" size="36rpx" space="10rpx" color="#000" width="48rpx" height="48rpx"
					prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/4c08432224cc4ce0a2cc467dfdca5638.png"
					:iconStyle="iconStyle" />
			</u-skeleton>
		</view>
		<u-notify message="成功" ref="uNotify" show></u-notify>
	</view>
</template>

<script>
	import {
		useRequest
	} from "@/js_sdk/tla-useRequest/useRequest.js";
	import {
		getMeetingWithSalesMan2,
	} from "@/api/sign_in.js";;
	export default {
		data() {
			return {
				iconStyle: {
					width: "48rpx",
					height: "48rpx",
					marginRight: "20rpx",
				},
				signUpId: null,
				hotState: null,
			};
		},
		onLoad(option) {
			this.signUpId = option.signUpId

			this.hotState = useRequest(() =>
				getMeetingWithSalesMan2(this.signUpId)
			);
		},
		methods: {
			tips(meesage, type, colorbg) {
				this.$refs.uNotify.show({
					type: type,
					color: "#FFF",
					// bgColor: '#588bf3',
					message: meesage,
					duration: 2000,
					fontSize: "28rpx",
					safeAreaInsetTop: false,
				});
			},
		},
	};
</script>

<style lang="scss">
	.signInDetailPage {
		background-color: #fff;
		height: 100vh;
		padding: 40rpx 28rpx;
		box-sizing: border-box;

		.consultantBox {
			padding-bottom: 18rpx;

			&_title {
				display: flex;
				align-items: center;

				&_border {
					width: 10rpx;
					background-color: $uni-color-primary;
					height: 32rpx;
				}

				&_text {
					padding-left: 24rpx;
				}
			}
		}

		.person_box_hoverClass {
			transition: 0.05s;
			opacity: 0.7;
		}

		.person_box {
			display: flex;
			width: 100%;
			// height: 146rpx;
			background: linear-gradient(135deg,
					#deebf9 0%,
					rgba(255, 255, 255, 0) 100%);
			justify-content: space-between;
			padding: 22rpx 20rpx;
			box-sizing: border-box;
			align-items: center;

			&_left {
				display: flex;
				align-items: center;

				&_text {
					margin-left: 12rpx;
				}
			}
		}

		.detail {
			width: 100%;
			padding: 0 12rpx;
			box-sizing: border-box;
			margin-top: 32rpx;

			&_title {
				width: 100%;
				padding: 0 0 24rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
			}

			&_time {
				padding: 24rpx 0;
				border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
			}

			&_address {
				padding: 24rpx 0;
			}
		}

		.signButton {
			width: 100%;
			margin-top: 100rpx;
		}
	}
</style>
